<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列duixiang</title>
  <script>
    function f1(){
      let s1=document.getElementById("s1")
      console.log(s1)
      let ops=s1.opacity;
      console.log(ops)
      console.log("选项的数量:" + ops.length);
      console.log("当前选中的选项的索引:" + ops.selectedIndex);
      for(let i=0;i<ops.length;i++){
        let op=ops[i];
        console.log("文本值(标签体):" + op.text)
        console.log("服务器值(value):" + op.value)
      }
    }
    function f2(){
      // 获取输入的值
      let inText = document.getElementById("inText").value;
      let inValue = document.getElementById("inValue").value;
      // 创建一个Option,在DOM中每一个Option对象对应页面中的一个option标签
      // 语法:new Option(文本值,服务器值)
      let op = new Option(inText, inValue);
      // 获取当前下拉列对象中所有的选项
      let s1 = document.getElementById("s1");
      let ops = s1.options;
      // 通过改变数组中的元素达到改变页面的效果
      // 在当前数组的末尾追加一个新的Option对象
      ops[s1.length] = op;
    }
    function f3(){
      let s1 = document.getElementById("s1");
      // let op = s1.options[s1.options.selectedIndex];
      let op = s1[s1.selectedIndex];
      console.log("所选中选项的文本值为:"+op.text+",服务器值为:"+op.value);

    }
    function f4(){
      let s1 = document.getElementById("s1");
      let inText = document.getElementById("inText").value;
      let inValue = document.getElementById("inValue").value;
      s1[s1.selectedIndex] = new Option(inText,inValue);
    }
    function f5(){
      let s1 = document.getElementById("s1");
      // 在下拉列对象中,如果将某个索引的元素的值设置为null,则表示删除该元素
      // s1[s1.selectedIndex] = null;
      // 如果不允许删除第一个,则可以通过判断服务器值或者文本值的方式阻止删除
      let op = s1[s1.selectedIndex];
      if(op.value != -1){
        s1[s1.selectedIndex] = null;
      }
    }
    function f6(){
      let s1 = document.getElementById("s1");
      // 只要改变了数组的长度,则超出长度部分的元素自动清除
      s1.length = 1;
    }

  </script>
</head>
<body>
<!--下拉列onclick点击不会改变，只有当前值放生改变才会生效-->
<!--onclick一般用于下拉列标签-->
<select id="s1" onclick="f3()">
  <option value="-1">请选择</option>
  <option value="1">aaa</option>
  <option value="2">bbb</option>
  <option value="3">ccc</option>


</select><br>
文本值:<input type="text" id="inText"><br>
服务器值:<input type="text" id="inValue"><br>
<button onclick="f1()">测试</button>
<button onclick="f2()">添加</button>
<button onclick="f4()">修改选项</button>
<button onclick="f5()">删除选中项</button>
<button onclick="f6()">清空选项</button>
</body>
</html>